<template>
  <view class="certification_view">
    <view class="form-wrap">
      <form>
        <view class="form-item self-border-bottom">
          <text class="form-item-label">真实姓名</text>
          <input type="text" v-model="data.realname" class="form-item-input" placeholder="请填写您的姓名" placeholder-class="input-placeholder"/>
          <view class="no-arrow"></view>
        </view>
        <view class="form-item self-border-bottom">
          <text class="form-item-label">证件号码</text>
          <input type="text" v-model="data.cardNumber" class="form-item-input" placeholder="请填写您的证件号码" placeholder-class="input-placeholder"/>
          <view class="no-arrow"></view>
        </view>
        <view class="form-item self-border-bottom">
          <text class="form-item-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</text>
          <picker :value="sexIndex" :range="sexArray" @change="bindSexPickerChange" class="form-item-pick" range-key="name">
            <view :class="{'pick-value': sexArray[sexIndex].type === null, 'pick-value-select': sexArray[sexIndex].type !== null}" v-if="sexArray && sexArray.length > 0">{{sexArray[sexIndex].name}}</view>
            <!-- <view class="pick-value" v-else>请选择性别</view> -->
          </picker>
          <view class="arrow"></view>
        </view>
    
        <view class="form-item">
          <text class="form-item-label">户籍地址</text>
          <picker :value="multiDistrictIndex" range-key="name" :range="multiDistrictArray" @cancel="bindDistrictPickerCancel" @change="bindDistrictPickerChange" @columnchange="bindDistrictColumnPickerChange" class="form-item-pick" mode="multiSelector">
            <view class="pick-value-select" v-if="multiDistrictArray && multiDistrictArray.length > 0 && selectDistrict">
              <text v-if="multiDistrictArray[0] && multiDistrictArray[0][multiDistrictIndex[0]]">{{multiDistrictArray[0][multiDistrictIndex[0]].name}}</text>
              <text v-if="multiDistrictArray[1] && multiDistrictArray[1][multiDistrictIndex[1]]">{{multiDistrictArray[1][multiDistrictIndex[1]].name}}</text>
              <text v-if="multiDistrictArray[2] && multiDistrictArray[2][multiDistrictIndex[2]]">{{multiDistrictArray[2][multiDistrictIndex[2]].name}}</text>
            </view>
            <view class="pick-value" v-else>请选择您的户籍地址</view>
          </picker>
          <view class="arrow"></view>
        </view>

        <view class="cut-line"></view>
        <view class="form-other-item">
          <view class="form-item-head">
            <view class="title">
              上传身份证
            </view>
          </view>
          <view class="form-item-content" style="display: flex;">
            <view class="common-img-wrap" @click="uploadFile(1)">
              <view class="no-upload-img" v-if="!data.file1 || !data.file1Url">
                <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                <view class="text">
                  上传身份证正面
                </view>
              </view>
              <view class="upload-img-wrap" v-else>
                <image :src="data.file1Url" mode="" class="upload-img"></image>
              </view>
            </view>
            <view class="common-img-wrap" style="margin-left: 27rpx;" @click="uploadFile(2)">
              <view class="no-upload-img" v-if="!data.file2 || !data.file2Url">
                <image src="/static/image/qrcode/camera.png" mode="" class="img"></image>
                <view class="text">
                  上传身份证反面
                </view>
              </view>
              <view class="upload-img-wrap" v-else>
                <image :src="data.file2Url" mode="" class="upload-img"></image>
              </view>
            </view>
          </view>
        </view>
      </form>
    </view>
    
    <view class="qrcode_selected_platform-footer" v-if="status != 0">
      <button type="primary" class="qrcode_selected_platform-footer-btn" @click="nextStep">提交</button>
    </view>
  </view>
</template>

<script>
import formValid from '@/unit/graceChecker.js'
import { multiDistrict } from '@/unit/common.js'
import { uploadFile } from '@/unit/common.js'
import { AuthcUserSave, FindByUserId, UserUpdateAndReset } from '@/service/user/user.service.js';
export default {
  data () {
    return {
      sexArray: [{
        type: null,
        name: '请选择性别'
      },{
        type: 2,
        name: '女'
      }, {
        type: 1,
        name: '男'
      }],
      status: null,
      isEdit: false,
      sexIndex: 0,
      selectSex: false,
      selectDistrict: false,
      multiDistrictIndex: [], // 省市区选择的index
      multiDistrictArray: [], // 省市区数据 Array[Object]
      multiDistrictIds: [], // 省市区ID
      originMultiDistrictIndex: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictArray: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictIds: [], // 原始数据 用于取消选择省市区，还原原始数据
      data: {
        realname: '', // 真实姓名
        gender: null, // 性别
        cardNumber: '',// 证件号
        districtId: null, // 户籍地址
        file1Url: null, // 身份证正面
        file1: '',
        file2: null, // 身份证背面
        file2Url: ''
      }
    }
  },
  methods: {
    uploadFile (type) {
      uploadFile({
        success: (res) => {
          switch (type) {
          case 1:
            this.data.file1 = res.data.id;
            this.data.file1Url = res.data.url;
            break;
          case 2:
            this.data.file2 = res.data.id;
            this.data.file2Url = res.data.url;
            break;
          default:
          }
        }
      });
    },
    async initDistrictData (district) { // 初始化省市区数据
      let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.initMultDistrictArray({
        district: district
      });
      this.multiDistrictArray = multiDistrictArray;
      this.multiDistrictIndex = multiDistrictIndex;
      this.multiDistrictIds = multiDistrictIds;
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(multiDistrictArray));
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(multiDistrictIds));
    },
    bindDistrictPickerCancel (e) { // 取消省市区的选择
      this.multiDistrictArray = JSON.parse(JSON.stringify(this.originMultiDistrictArray));
      this.multiDistrictIndex = JSON.parse(JSON.stringify(this.originMultiDistrictIndex));
      this.multiDistrictIds = JSON.parse(JSON.stringify(this.originMultiDistrictIds));
    },
    bindDistrictPickerChange (e) { // 确认省市区的选择
      this.selectDistrict = true;
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(this.multiDistrictArray));      
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(this.multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(this.multiDistrictIds));
      this.data.districtId = this.multiDistrictIds[this.multiDistrictIds.length - 1];
    },
    async bindDistrictColumnPickerChange (e) { // 省市区的列发生变化
      if (e.detail.column < this.multiDistrictArray.length - 1) {
        let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.bindDistrictColumnPickerChange({
          column: e.detail.column,
          index: e.detail.value,
          multiDistrictIndex: JSON.parse(JSON.stringify(this.multiDistrictIndex)),
          multiDistrictArray: JSON.parse(JSON.stringify(this.multiDistrictArray))
        });
        this.multiDistrictArray = multiDistrictArray;
        this.multiDistrictIndex = multiDistrictIndex;
        this.multiDistrictIds = multiDistrictIds;
      } else {
        this.multiDistrictIndex.splice(e.detail.column, 1, e.detail.value);
        this.multiDistrictIds.splice(e.detail.column, 1, this.multiDistrictArray[e.detail.column][e.detail.value].id);
      }
    },
    bindSexPickerChange (e) {
      this.selectSex = true;
      this.sexIndex = e.target.value;
      this.data.gender = this.sexArray[e.target.value].type;
    },
    nextStep () {
      let rule = [
        {name:'realname', checkType: 'notnull', checkRule:'',  errorMsg:'请填写您的真实姓名'},
        {name:'cardNumber', checkType: 'notnull', checkRule:'',  errorMsg:'请填写您的证件号码'},
        {name:'gender', checkType: 'gender', checkRule:'',  errorMsg:'请选择您的性别'},
        {name:'districtId', checkType: 'notnull', checkRule:'',  errorMsg:'请选择户籍所在地'},
        {name:'file1', checkType: 'notnull', checkRule: '',  errorMsg:'请上传身份证正面照'},
        {name:'file2', checkType: 'notnull', checkRule: '',  errorMsg:'请上传身份证背面照'}
      ];
      var checkRes = formValid.check(this.data, rule);
      if (checkRes) {
        let params = Object.assign(this.data);
        delete params.districtIds;
        delete params.image1;
        delete params.image1Id;
        delete params.image2;
        delete params.image2Id;
        delete params.status;
        delete params.street;
        delete params.age;
        delete params.address;
        if (this.isEdit) { // 
          UserUpdateAndReset(params, res => {
            if (res.status == 0) {
              uni.showToast({
                title: '更新实名认证信息成功！',
                icon: 'none',
                success: () => {
                  setTimeout(function () {
                    uni.navigateBack();
                  }, 2000);
                }
              });
            } else {
              uni.showToast({ title: res.msg, icon: "none" });
            }
          });
        } else {
          AuthcUserSave(params, res => {
            if (res.status == 0) {
              uni.showToast({
                title: '保存实名认证信息成功！',
                icon: 'none',
                success: () => {
                  setTimeout(function () {
                    uni.navigateBack();
                  }, 2000);
                }
              });
            } else {
              uni.showToast({ title: res.msg, icon: "none" });
            }
          });
        }
      } else {
        uni.showToast({ title: formValid.error, icon: "none" });
      }
    },
    getUserInfo () {
      FindByUserId({}, res => {
        if (res.status == 0) {
          if (res.data && res.data.id) {
            this.isEdit = true;
            res.data.file1Url = res.data.image1;
            res.data.file2Url = res.data.image2;
            res.data.file1 = res.data.image1Id;
            res.data.file2 = res.data.image2Id;
            this.selectSex = true;
            if (res.data.districtIds && res.data.districtIds.length > 0) {
              this.selectDistrict = true;
              res.data.districtId = res.data.districtIds[res.data.districtIds.length - 1];
              this.initDistrictData(res.data.districtIds);
            } else {
              this.initDistrictData();
            }
            
            if (res.data.gender) {
              this.sexArray.forEach((item, index) => {
                if (item.type == res.data.gender) {
                  this.sexIndex = index;
                }
              });
            } else {
              this.sexIndex = 0;
            }
            this.status = res.data.status;
            this.data = res.data;
          } else {
            this.initDistrictData();
          }
        }
      })
    }
  },
  mounted() {
    this.getUserInfo();
  },
  onShow () {
    // 
  },
  onLoad (option) {
    // this.init(option);
  }
}
</script>

<style lang="scss" scoped>
  .certification_view {
    position: relative;
    min-height: 100vh;
    background: #FFFFFF;
    .form-wrap {
      // margin-top: 20rpx;
      background: #FFFFFF;
      .self-border-bottom {
        border-bottom: 1rpx solid #E1E1E1;
      }
      .self-margin-top {
        margin-top: 22rpx;
      }
      .cut-line {
        height: 22rpx;
        background-color: #FAFAFA;
      }
      
      .pick-value {
        // text-align: right;
        color: #999999;
        font-size: 24rpx;
      }
      
      .pick-value-select {
        color: #333333;
        font-size: 28rpx;
      }
      .form-item {
        display: flex;
        width: 718rpx;
        justify-content: center;
        align-items: center;
        margin-left: 32rpx;
        // height: 100rpx;
        padding: 36rpx 0;
        
        .form-item-label {
          width: 140rpx;
          text-align: left;
          padding: 0 32rpx 0 0;
          font-size: 28rpx;
          color: #333333;
          font-weight:500;
        }
        .form-item-input {
          font-size: 28rpx;
          height: 38rpx;
          color: #333333;
          flex: 1;
          .input-placeholder {
            font-size: 24rpx;
            color: #999999;
          }
        }
        .form-item-pick {
          flex: 1;
        }
        .arrow {
          margin-right: 33rpx;
          border-right: 3rpx solid #8A8A8A;
          border-top: 3rpx solid #8A8A8A;
          height: 18rpx;
          width: 18rpx;
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
          border-left: 2rpx solid transparent;
          border-bottom: 2rpx solid transparent;
        }
        .no-arrow {
          margin-left: 64rpx;
        } 
      }
      
      .form-other-item {
        padding: 0 34rpx 22rpx;
        .form-item-head {
          overflow: hidden;
          padding-top: 40rpx;
          .title {
            float: left;
            color: #333333;
            font-size: 36rpx;
          }
          .sample {
            float: right;
            text {
              color: #FF7473;
              font-size: 28rpx;
              text-decoration: underline;
            }
          }
          &:after {
            clear: both;
          }
        }
        .form-item-content {
          margin-top: 30rpx;
          .common-img-wrap {
            width: 330rpx;
            height: 200rpx;
            border: 1px dashed #E1E1E1;
            border-radius: 16rpx;
            
            .no-upload-img {
              width: 100%;
              height: 100%;
              display: flex;
              flex-flow: column;
              align-items: center;
              justify-content: center;
              .img {
                width: 80rpx;
                height: 80rpx;
              }
              .text {
                margin-top: 29rpx;
                color: #666666;
                font-size: 24rpx;
                font-weight:500;
              }
            }
            
            .upload-img-wrap {
              width: 100%;
              height: 100%;
              
              .upload-img {
                width: 100%;
                height: 100%;
                border-radius: 16rpx;
              }
            }
          }
          .upload-img-wrap {
            width: 100%;
            height: 100%;
            
            .upload-img {
              width: 100%;
              height: 100%;
              border-radius: 16rpx;
            }
          }
        }
      }
    }
    
    .qrcode_selected_platform-footer {
      position: fixed;
      bottom: 0rpx;
      left: 0rpx;
      width: 100%;
      height: 105rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1rpx solid #E1E1E1;
      background: #FFFFFF;
      .qrcode_selected_platform-footer-btn {
        width: 687rpx;
        height: 70rpx;
        background-color: #434343;
        color: #F6DA99;
        font-size: 30rpx;
      }
    }
  }
</style>

<!-- <template>
  <view class="box">
    <form @submit="formSubmit">
      <view class="btn_div">
        <view class="unction_btn ">
          <text class="btn_font">真实姓名</text>
          <input class="uni-input" focus placeholder="填写姓名" v-model="name" name="name"/>
        </view>
        <view class="unction_btn ">
          <text class="btn_font">证件号码</text>
          <input class="uni-input" placeholder="填写证件号" v-model="cardNumber" name="cardNumber"/>
        </view>
        <view class="unction_btn ">
          <text class="btn_font">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</text>
          <picker @change="bindPickerChange" :value="index" :range="array">  <input type="text" placeholder="请选择" class="choice_btn_font" v-model="array[index]"/>
          </picker>
          <view class="arrow"></view>
        </view>
        <view class="unction_btn delete_bor">
          <text class="btn_font">户籍地址</text>
          <view class="choice btn_font">
            <picker :value="multiDistrictIndex" range-key="name" :range="multiDistrictArray" @cancel="bindDistrictPickerCancel" @change="bindDistrictPickerChange" @columnchange="bindDistrictColumnPickerChange" class="form-item-pick" mode="multiSelector" name="picker">
              <view class="pick-value" v-if="multiDistrictArray && multiDistrictArray.length > 0" name="picker">
                <text v-if="multiDistrictArray[0] && multiDistrictArray[0][multiDistrictIndex[0]]">{{multiDistrictArray[0][multiDistrictIndex[0]].name}}</text>
                <text v-if="multiDistrictArray[1] && multiDistrictArray[1][multiDistrictIndex[1]]">{{multiDistrictArray[1][multiDistrictIndex[1]].name}}</text>
                <text v-if="multiDistrictArray[2] && multiDistrictArray[2][multiDistrictIndex[2]]">{{multiDistrictArray[2][multiDistrictIndex[2]].name}}</text>
              </view>
              <view class="pick-value" v-else>请选择户籍地址</view>
            </picker>
          </view>
          <view class="arrow"></view>
        </view>
      </view>
      <view class="load_card">
        <view class="card_title">上传身份证</view>
        <view class="card_div">
          <view class="card_left" @click="FrontOfIdCard">
            <image :src="images"></image>
            <view>上传身份证正面</view>
          </view>
          <view class="card_right" @click="ReverseOfIdCard">
            <image :src="images1"></image>
            <view>上传身份证反面</view>
          </view>
        </view>
      </view>
      <view class="uni-padding-wrap uni-common-mt">
        <button form-type="submit" @click="SubmissionClick">提交</button>
      </view>
    </form>
  </view>
</template>
<script>
import { AuthcUserSave,FindByUserId,UserUpdateAndReset } from '../../service/user/user.service.js';
import { uploadFile, multiDistrict } from '../../unit/common.js'
import graceChecker  from '../../unit/graceChecker.js'
export default {
  data() {
    return {
      name: '', //姓名
      cardNumber: '', //证件号
      // gender: '', //性别
      address:[], //地址
      array: ['女', '男'],
      index: '',
      cityId:'',//城市id
      FrontOfId:'',//正面图片id
      ReverseOfId:'',//反面图片id
      images:'../../static/logo.png',//身份证正面
      images1:'../../static/logo.png',//身份证反面
      
      // 省市区相关
      multiDistrictIndex: [], // 省市区选择的index
      multiDistrictArray: [], // 省市区数据 Array[Object]
      multiDistrictIds: [], // 省市区ID
      originMultiDistrictIndex: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictArray: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictIds: [], // 原始数据 用于取消选择省市区，还原原始数据
    }
  },
  created() {
    this.UserFindById(); //通过用户id查看实名认证信息
  },
  methods: {
    formSubmit: function (e) {
      //将下列代码加入到对应的检查位置
      //定义表单规则
      var rule = [
        {name:"name", checkType : "string", checkRule:"1,3",  errorMsg:"姓名应为1-3个字符"},
        {name:"cardNumber", checkType : "reg", checkRule:"",  errorMsg:"请输入证件号"},
        
      ];
      //进行表单检查
      var formData = e.detail.value;
      var checkRes = graceChecker.check(formData, rule);
      if(checkRes){
        uni.showToast({title:"验证通过!", icon:"none"});
      }else{
        uni.showToast({ title: graceChecker.error, icon: "none" });
      }
    },
    async initDistrictData (district) { // 初始化省市区数据
      let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.initMultDistrictArray({
        district: district
      });
      this.multiDistrictArray = multiDistrictArray;
      this.multiDistrictIndex = multiDistrictIndex;
      this.multiDistrictIds = multiDistrictIds;
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(multiDistrictArray));
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(multiDistrictIds));
    },
    bindDistrictPickerCancel (e) { // 取消省市区的选择
      this.multiDistrictArray = JSON.parse(JSON.stringify(this.originMultiDistrictArray));
      this.multiDistrictIndex = JSON.parse(JSON.stringify(this.originMultiDistrictIndex));
      this.multiDistrictIds = JSON.parse(JSON.stringify(this.originMultiDistrictIds));
      
    },
    bindDistrictPickerChange (e) { // 确认省市区的选择
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(this.multiDistrictArray));      
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(this.multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(this.multiDistrictIds));
      this.cityId = this.originMultiDistrictIds[this.originMultiDistrictIds.length-1]
    },
    async bindDistrictColumnPickerChange (e) { // 省市区的列发生变化
      if (e.detail.column < this.multiDistrictArray.length - 1) {
        let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.bindDistrictColumnPickerChange({
          column: e.detail.column,
          index: e.detail.value,
          multiDistrictIndex: JSON.parse(JSON.stringify(this.multiDistrictIndex)),
          multiDistrictArray: JSON.parse(JSON.stringify(this.multiDistrictArray))
        });
        this.multiDistrictArray = multiDistrictArray;
        this.multiDistrictIndex = multiDistrictIndex;
        this.multiDistrictIds = multiDistrictIds;
      } else {
        this.multiDistrictIndex.splice(e.detail.column, 1, e.detail.value);
        this.multiDistrictIds.splice(e.detail.column, 1, this.multiDistrictArray[e.detail.column][e.detail.value].id);
      }
    },
    bindPickerChange: function(e) {
      this.index = e.target.value
    },
    // 身份证正面
    FrontOfIdCard () {
      uploadFile({
        success: (res) => {
          this.FrontOfId = res.data.id;
          this.images = res.data.url;
        }
      })
    },
    // 身份证反面
    ReverseOfIdCard () {
      uploadFile({
        success: (res) => {
          this.images1 = res.data.url;
          this.ReverseOfId = res.data.id
        }
      })
    },
    //通过用户id查看用户实名认证信息
    UserFindById(){
      FindByUserId({
        
      }, (res) => {
        if(res.status == 0){
          this.images = res.data.image1,
          this.images1 = res.data.image2,
          this.name = res.data.realname,
          this.cardNumber = res.data.cardNumber,
          this.index = res.data.gender,
          // this.address = res.data.address;
          console.log(res.data.address)
          
          let array = res.data.address;
          let sta = '[]';
          sta = array[0].split('/');
          let sta1 = sta.join("-")
          console.log(sta1)
          this.address.push(sta1)
          for (i=0;i<sta1.length ;i++ ) { 
            document.write(strs[i]+"、"); //分割后的字符输出 “、”隔开
          } 
        }else{
          
        }
      })
    },
    // 提交保存实名认证信息
    SubmissionClick () {
      debugger
      AuthcUserSave({
        file1:this.FrontOfId,
        file2:this.ReverseOfId,
        realname: this.name,
        cardNumber: this.cardNumber,
        gender: this.index,
        districtId:this.cityId
      }, (res) => {
        if(res.status == 0) {
          uni.navigateTo({
            url: '/pages/user/zhanghaoGuanli'
          })
        }
      })
    },
    
  }
}
</script>
<style scoped>
  .btn_div {
    width: 100%;
    height: 390rpx;
    background: #FFF;
  }

  .gender_div {
    width: 100%;
    height: 300rpx;
    text-align: center;
    background: #FFF;
  }

  .gender {
    width: 60%;
    line-height: 70rpx;
    padding-top: 40rpx;
    margin: 0 auto;
  }

  .gender view {
    border-bottom: 2rpx solid #03ccbb;
    border-bottom: 2rpx solid #03ccbb;
  }

  /* 三角形 */
  .arrow {
    border-right: 3rpx solid #8A8A8A;
    border-top: 3rpx solid #8A8A8A;
    height: 18rpx;
    width: 18rpx;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
    border-left: 2rpx solid transparent;
    border-bottom: 2rpx solid transparent;
  }

  /* 列表 */
  .unction_btn {
    width: 718.8rpx;
    height: 97rpx;
    line-height: 97rpx;
    border-bottom: 2rpx solid #E1E1E1;
    opcity: 0.5;
    position: relative;
    margin-left: 31rpx;
  }

  .unction_btn>text {

    position: absolute;
    left: 8rpx;
  }

  .unction_btn .arrow {
    position: absolute;
    right: 29rpx;
    top: 40rpx;
  }

  /* 下面的button按钮 */
  .uni-common-mt button {
    width: 687rpx;
    height: 70rpx;
    background: #434343;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(246, 218, 153, 1);
    margin: 21rpx auto;
  }

  .uni-common-mt {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 112rpx;
    border-top: 2rpx solid #E1E1E1;
  }

  /* 删除下边框 */
  .delete_bor {
    border: none;
  }

  .uni-input {
    position: absolute;
    top: 36rpx;
    left: 162rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .uni-input1 {
    position: absolute;
    top: 330rpx;
    left: 34rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(225, 225, 225, 1)
  }
  .choice_btn_font{
    position: absolute;
    top: 30rpx;
    right: 65rpx;
    width: 85rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
  }
  .choice {
    position: absolute;
    top: 4rpx;
    right: 65rpx;
  }

  .btn_font {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #777;
  }

  /* 上传身份证 */
  .load_card {
    width: 100%;
    height: 832rpx;
    background: #FFF;
    margin-top: 20rpx;
  }

  .card_title {
    padding: 43rpx 32rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    padding: 43rpx 32rpx;
  }

  .card_left,
  .card_right {
    text-align: center;
    width: 330rpx;
    height: 200rpx;
    border: 2rpx dashed rgba(225, 225, 225, 1);
    border-radius: 16rpx;
    float: left;
    margin-left: 31rpx;
  }

  .card_right>image,
  .card_left>image {
    width: 79rpx;
    height: 79rpx;
    border-radius: 50%;
    margin-top: 35rpx;
  }

  .card_left>view,
  .card_right>view {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
  }
</style>
 -->